<template>
    <div class="popularize">
        <h5>
            <span>查看活动</span>
             <el-button size="medium" @click="goback">返回</el-button>
        </h5>
        <div class="popularize-top">
            <span>活动名称：{{activityData.extName}}</span>
            <span>活动周期：{{format(activityData.startTime)}}——{{format(activityData.endTime)}}</span>
        </div>
        <div class="table-box">
            <el-table  :data="activityData.rewardList" max-height='500px'  style="width: 100%" fit >
                <el-table-column label="类目">
                    <template slot-scope="scope">
                        <span v-if="scope.row.category==1">优惠券</span>
                        <span v-if="scope.row.category==2">积分</span>
                        <span v-if="scope.row.category==3">金币</span>
                    </template>
                </el-table-column>
                <el-table-column label="类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.faceType==1">现金券</span>
                        <span v-else-if="scope.row.faceType==2">折扣</span>
                        <span v-else-if="scope.row.faceType==3">满减券</span>
                        <span v-else>/</span>
                    </template>
                </el-table-column>
                <el-table-column  prop="rewName" label="名称"></el-table-column>
                <el-table-column label="适用范围">
                    <template slot-scope="scope">
                        <span v-if="scope.row.applyLimits==1">商户</span>
                        <span v-else-if="scope.row.applyLimits==0">全平台</span>
                        <span v-else-if="scope.row.applyLimits==2">商品</span>
                        <span v-else>
                            <span v-if="scope.row.category==2">可提现</span>
                            <span v-if="scope.row.category==3">直播间可用</span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column  prop="rewNum" label="使用人数"></el-table-column>
                <el-table-column  prop="rewNum" label="使用数量"></el-table-column>
                <el-table-column  prop="dissatisfied" label="奖励使用总金额"></el-table-column>
                <el-table-column  prop="dissatisfied" label="平台承担金额"></el-table-column>
            </el-table>
        </div>
        <el-pagination class="pag"  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage"  :page-sizes="[5, 10, 15, 20]"  :page-size="5"  layout="total, sizes, prev, pager, next, jumper"  :total=total></el-pagination>
    </div>
</template>

<script>
export default {
    data(){
        return{
            baseurl:'',//新人推广
            baseurly:'',//优惠券
            editId:'',//订单id-上页跳转页面获取
            activityData:'',//活动数据
            rewardPromoter:[],
            rewardPromotered:[],
            total:102,
            currentPage: 1,
        }
    },
    mounted(){
        this.baseurl=this.$store.state.baseurl2
        this.baseurly=this.$store.state.baseurl
        this.editId=this.$route.query.id
        this.getDatabyid()
    },
    methods:{
        //editId获取编辑内容
        getDatabyid(){
            var extensionEntity={
                id: this.editId,
            }
            this.axios({
                url:this.baseurl+'/public/extension/extension/getlist',
                method:'post',
                data:extensionEntity,
            }).then(res=>{
                if(res.data.code==0){
                    this.activityData=res.data.data[0]
                    this.activityData.rewardList.forEach(e => {
                        if(e.couponId){
                            this.axios({
                                url:this.baseurly+'/coupon/listByIds',
                                method:'post',
                                data:[e.couponId],
                            }).then(rest=>{
                                e.faceType=rest.data.data[0].faceType
                                e.applyLimits=rest.data.data[0].applyLimits
                                if(e.rewardPersion==1){
                                    this.rewardPromoter.push(e)
                                }else{
                                    this.rewardPromotered.push(e)
                                }
                            })
                        }else{
                            if(e.rewardPersion==1){
                                this.rewardPromoter.push(e)
                            }else{
                                this.rewardPromotered.push(e)
                            }
                        }
                    });
                    console.log(this.rewardPromoter)
                    console.log(this.rewardPromotered)
                }
            })
        },
        //返回
        goback(){
            this.$router.go(-1)
        },
        //分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        //处理时间戳
        format(shijianchuo) {
            var time = new Date(shijianchuo*1000);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var h = time.getHours();
            var f = time.getMinutes();
            var s = time.getSeconds();
            //想要什么格式可以自己改
            // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
            return y + '-' + m + '-' + d +" "+ this.add0(h)+':'+this.add0(f);
        },
        //小于10的时候，前边加0（08：08：12）
        add0(m) {
            return m < 10 ? '0' + m : m
        },
    },
    watch:{
        
    }
}
</script>

<style scoped>
.popularize{
    min-height: calc(100vh - 100px);
    position: relative;
}
.popularize>h5{
    display: flex;
    justify-content: space-between;
}
.table-box{
    margin-top: 60px;
}
.popularize-top{
    margin-top: 50px;
    font-size: 15px;
}
.popularize-top span{
    display: inline-block;
    margin-right: 40px;
}
.title{
    display: inline-block;
    text-align: right;
    width: 90px;
    margin-right: 15px;
}
.button{
    display: inline-block;
    font-size: 15px;
    border: 1px solid #ddd;
    padding: 6px 15px;
    border-radius: 3px;
}
.popularize-top input{
    width: 210px;
    padding-left: 15px;
}
.popularize-top input::-webkit-input-placeholder {
    color: #c5c9cf;
    font-size: 14px;
}
.pag{
    margin-top: 50px;
}
</style>

<style scoped>
/* 遮罩层 */
.mask{
    width: 100vw;
    height: 100vh;
    /* color: #555; */
    background: rgba(51, 51, 51, 0.692);
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
}
.mask .content{
    width: 620px;
    height: 400px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 30PX;
}
.mask .content-top{
    display: flex;
    justify-content: space-between;
}
.mask .content-top img{
    width: 35px;
}
.content-items{
    margin: 30px;
}
.content-items .item{
    margin:20px 10px;
}
.content-items .item span:first-child{
    display: inline-block;
    width: 100px;
}
</style>
<style>
.el-date-editor .el-range-separator{
    padding: 0;
}
</style>